button {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    background: $--color-white;
    cursor: pointer;
    border: $--border-base;
    color: $--color-text-primary;
    transition: 0.1s;
    outline: none;
    appearance: none;
    -webkit-appearance: none; /* Safari and Chrome */
    -moz-appearance: none; /* Firefox */
    box-sizing: border-box;
    margin: 0;
    font-weight: $--button-font-weight;
    @include utils-user-select(none);
    & + & {
        margin-left: 10px;
    }

    &:not(.is-disabled) {
        @include hover-focus-active() {
            background-color: $--color-primary-light-9;
            color: $--color-primary;
        }

        @include hover-focus() {
            border-color: $--color-primary-light-6;
        }

        @include active() {
            border-color: $--color-primary;
        }
    }

    &.is-disabled {
        cursor: not-allowed;
        border-color: mix($--color-white, $--border-color-base, 50%);
        color: mix($--color-white, $--color-text-primary, 50%);
    }

    // 按钮尺寸
    @include button-size();

    // 按钮形状
    @include button-shape();

    // 按钮类型
    @include button-type($--color-primary, primary);
    @include button-type($--color-success, success);
    @include button-type($--color-warning, warning);
    @include button-type($--color-danger, danger);
    @include button-type($--color-info, info);
    // 类型 plain 默认 (没有设置颜色)
    &.foxui-plain {
        &:not(.is-disabled) {
            @include hover-focus-active {
                background-color: $--color-white;
            }

            @include hover-focus() {
                color: $--color-primary;
                border-color: $--color-primary;
            }

            @include active() {
                color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
                border-color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
            }
        }
    }
    // 类型 text 默认 (没有设置颜色)
    &.foxui-text {
        border-color: transparent;
        background: transparent;
        padding-left: 0;
        padding-right: 0;

        &:not(.is-disabled) {
            @include hover-focus-active {
                border-color: transparent;
                background: transparent;
            }

            @include hover-focus() {
                color: $--color-primary;
            }

            @include active() {
                color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
            }
        }
    }

    &.foxui-block {
        width: 100%;
    }
}

.foxui-button-group {
    display: flex;

    button {
        margin: 0;

        &:first-child {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        &:last-child {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

        &:not(:first-child):not(:last-child) {
            border-radius: 0;
        }

        &:not(:first-child) {
            margin-left: 1px;
        }
    }
}
